<template>
  <a-card :bordered="false" style="height: 90%">
    <div class="table-page-search-wrapper">
      <div id="main"></div>
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="节点名称">
              <a-input v-model="queryParam.nodeName" placeholder="节点名称"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="节点id">
              <a-input v-model="queryParam.nodeId" placeholder="节点id"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="节点ip">
              <a-input v-model="queryParam.ip" placeholder="节点ip"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="节点端口">
              <a-input v-model="queryParam.port" placeholder="节点端口"/>
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
            >
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button  type="primary" icon="plus" v-if="$auth('node-add')" @click="handleEdit()">新建</a-button>
    </div>

    <s-table
      ref="table"
      size="middle"
      :row-key="(record) => record.id"
      :columns="columns"
      :data="loadData"
      :row-selection="options.rowSelection"
      :page-size="10"
      :pagination="pagination"
    >
      <span slot="action" slot-scope="text, record">
        <template>
          <div>
            <a-button v-if="$auth('node-edit')" type="primary" @click="handleEdit(record)">
              编辑
            </a-button>
            <a-button
              v-if="$auth('node-del')"
              style="margin-left: 8px"
              type="danger"
              @click="deleteRow(record.id)"
            >
              删除
            </a-button>
            <a-button style="margin-left: 8px" v-if="$auth('node-info')" type="info" @click="handleInfo(record)" >
              详情
            </a-button>
          </div>
        </template>
      </span>

      <span slot="nodelevel" slot-scope="text, record">
        {{text | nodelevelFilter}}
      </span>

      <span slot="nodeType" slot-scope="text, record">
        {{text | nodeTypeFilter}}
      </span>

      <span slot="nettymonitor" slot-scope="text, record">
        {{text ? '是' : '否'}}
      </span>

      <span slot="nodeStatus" slot-scope="text, record">
        {{text ? '在线' : '离线'}}
      </span>
    </s-table>
    <!--编辑-->
    <node-edit ref="nodeEdit" @ok="$refs.table.refresh(true)"/>
    <node-info ref="nodeInfo" @ok="$refs.table.refresh(true)"/>
  </a-card>
</template>
<style scoped lang="scss">
.table-operator {
  margin-bottom: 10px;
}
</style>
<script>
import moment from 'moment'
import {STable} from '@/components'
import nodeEdit from './Edit.vue'
import nodeInfo from './info.vue'
import {deleteNode, page} from '@/api/rootnode'


export default {
  name: 'index',
  components: {
    STable,
    nodeEdit,
    nodeInfo
  },
  data() {
    return {
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '节点id',
          dataIndex: 'id'
        },
        {
          title: '节点名称',
          dataIndex: 'nodename'
        },
        {
          title: '节点ip',
          dataIndex: 'nodeip'
        },
        {
          title: '节点port',
          dataIndex: 'nodeport'
        },
        {
          title: '心跳监听port',
          dataIndex: 'nettyport'
        },
        {
          title: '节点前缀',
          dataIndex: 'prefixCode'
        },
        {
          title: '节点状态',
          dataIndex: 'status',
          scopedSlots: {customRender: 'nodeStatus'},
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'}
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        // eslint-disable-next-line no-undef
        return page(Object.assign(parameter, this.queryParam))
          .then(res => {
            return res.data
          })
      },
      selectedRowKeys: [],
      selectedRows: [],
      options: {
        alert: false,
        rowSelection: null
      },
      pagination: {
        total: 0,
        defaultPageSize: 2, // 每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'], // 每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
      }
    }
  },
  created() {
  },
  filters: {
    nodelevelFilter(nodelevel){
      switch (nodelevel) {
        case 1:
          return '一级节点'
          break
        case 2:
          return '二级节点'
          break
        case 3:
          return '三级节点'
          break
        default:
          return '';
      }
    },
    nodeTypeFilter(nodeType){
      switch (nodeType) {
        case 1:
          return '真实节点'
          break
        case 2:
          return '虚拟节点'
          break
        default:
          return '';
      }
    }
  },
  methods: {
    handleEdit(obj) {
      var form = Object.assign({}, obj)
      this.$refs.nodeEdit.initData(form)
    },
    handleInfo(obj) {
      var form = Object.assign({}, obj)
      this.$refs.nodeInfo.initData(form)
    },
    deleteRow(id) {
      const _this = this
      // eslint-disable-next-line no-unused-vars
      _this.$confirm({
        title: '确认删除该节点吗?',
        content: '删除后将不可恢复',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          deleteNode(id).then(res => {
            if (res.code === '0') {
              _this.$message.success('删除成功')
              _this.$refs.table.refresh(true)
            } else {
              _this.$message.error(res.message)
            }
          })
        },
        onCancel() {
        }
      })
    },
    onSelectChange: function (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },

    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    },
  }
}
</script>
